<template>
  <div style="height: 100%">
    <a-layout
      id="components-layout-demo-custom-trigger"
      style="height: 100%; padding:0;"
    >
      <a-layout-header class="header">
        <a-row type="flex">
          <a-col class="app-name">{{ appName }}</a-col>
          <a-col class="menu-wrapper" flex="1">
            <a-menu
              theme="dark"
              mode="horizontal"
              class="menu"
            >
              <a-menu-item key="1">
                <a-tooltip>
                  <template slot="title">返回首页</template>
                  <a-icon type="home" @click="clickMenu('/welcome')"></a-icon>
                </a-tooltip>
              </a-menu-item>
              <a-sub-menu key="3">
                <span
                  slot="title"
                  :title="userInfo.userName"
                >
                  <img class="portrait"/>
                  <span class="username">{{ userInfo.userName }}</span>
                </span>
                <a-menu-item
                  @click="clickMenu('/baseSetting/personal', '2021060102')"
                >
                  <a-icon type="setting"/>
                  个人设置
                </a-menu-item>
                <a-menu-item @click="exit">
                  <a-icon type="logout"/>
                  登出
                </a-menu-item>
              </a-sub-menu>
            </a-menu>
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout class="layout" :theme="theme">
        <a-layout-sider
          width="210"
          :class="theme"
          style="overflow-x: hidden;"
          collapsible
          breakpoint="lg"
          v-model="collapsed"
        >
          <template v-slot:trigger>
            <div
              style="font-size:20px;"
              :style="collapsed ? {} : { float: 'right', paddingRight: '10px' }"
            >
              <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"></a-icon>
            </div>
          </template>
          <a-menu class="custom-menu" :theme="theme" mode="inline" :inlineIndent="21" :selectedKeys="currentMenu">
            <template v-if="menuTree.length > 0">
              <template v-for="menu in menuTree">
                <a-sub-menu v-if="menu.children" :key="menu.key">
                  <span slot="title">
                    <a-icon v-if="menu.icon" :type="menu.icon"/>
                    <span>{{ menu.title }}</span>
                  </span>
                  <a-menu-item
                    v-for="item in menu.children"
                    :key="item.key"
                    @click="clickMenu(item.url, item.key)"
                  >{{ item.title }}
                  </a-menu-item
                  >
                </a-sub-menu>
                <a-menu-item
                  v-else
                  @click="clickMenu(menu.url, item.key)"
                  :key="menu.key"
                >
                  <a-icon v-if="menu.icon" :type="menu.icon"/>
                  <span>{{ menu.title }}</span>
                </a-menu-item>
              </template>
            </template>
          </a-menu>
        </a-layout-sider>
        <a-layout-content>
          <!-- Content -->
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import {devMenu, prodMenu} from '@/config/'
import menu from '@/config/menu'
import {notification} from 'ant-design-vue'
import storage from '@/utils/storage'
import logo from '@/assets/images/portal/logo.png'
import {queryWallet, balanceInquiry} from '@/api/wallet'

let appName = require('../../config/app').appName

export default {
  data () {
    return {
      imageUrl: '',
      userName: '',
      // collapsed: true,
      theme: 'dark',
      menuTree: process.env.NODE_ENV === 'development' ? devMenu : devMenu,
      menuIdx: 0,
      userInfo: storage.session.get('userInfo'),
      logo,
      appName
    }
  },
  mounted () {

  },
  computed: {
    ...mapState(['currentMenu']), //, "menuTree"
    orgId () {
      if (process.env.NODE_ENV === 'development') return storage.session.get('role') // 'DATA_BUSINESS'
      let info = storage.session.get('userInfo')
      return info ? (info.deptId || '') : ''
    },
    key () {
      return this.$route.fullPath // + Math.random();
    },
    collapsed: {
      get: function () {
        console.log('val', this.$store.state.isCollapsed)
        return this.$store.state.isCollapsed
      },
      set: function (val) {
        console.log('val2', val)
        this.$store.commit('setCollapsed', val)
      }
    }
  },
  methods: {
    // 钱包
    async getWallet () {
      let wallet = {}
      let res = await queryWallet({orgId: this.orgId})
      if (res.code === 0 && res.data.length !== 0) {
        wallet = res.data[0]
        try {
          let res = await balanceInquiry({accountNo: wallet.virtualCardNo})
          wallet.balance = res.data
        } catch (e) {
          // TODO handle the exception
        }
      }
      storage.session.set('wallet', wallet)
    },
    exit () {
      this.$confirm({
        content: '确认退出？',
        onOk: () => {
          sessionStorage.removeItem('userInfo')
          this.clickMenu('login')
        },
        onCancel () {
        }
      })
    },
    clickMenu (path, key) {
      key && this.$store.commit('setCurrentMenu', key)
      this.$router.push({path: path})
    }
  }
}
</script>
<style lang="scss" scoped>
@import "src/assets/css/constants.scss";

.header {
  background-color: $dark-header-bg;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;

  .app-name {
    color: white;
    font-size: 18px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei, sans-serif;
    font-weight: bold;
  }
}

.menu-wrapper {
  text-align: right;

  .menu {
    line-height: 60px;
    height: 60px;

    .portrait {
      width: 32px;
      height: 32px;
    }

    .username {
      margin-left: 8px;
      font-size: 14px;
      font-family: MicrosoftYaHei, sans-serif;
      color: #FFFFFF;
    }
  }

  /deep/ .ant-menu-dark, .ant-menu-dark .ant-menu-sub {
    background: $dark-header-bg;
  }

 /deep/ .ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu {
    background: $dark-header-bg;
  }
}

.layout {

  .dark {
    background: $dark-menu-bg;

    /deep/ .ant-layout-sider-trigger {
      background: #4A5A70;
    }
  }

  .ant-layout-sider-trigger {
    background: $dark-header-bg;
  }

  .light {
    background: $light-bg;
  }

  /deep/ .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
    margin: 0 !important;
  }

  .ant-menu-submenu-title:hover {
    background: white;
  }

  .ant-menu-dark, .ant-menu-dark .ant-menu-sub, .ant-menu-dark .ant-menu-item {
    background: $dark-menu-bg;
  }

  .ant-menu-inline .ant-menu-item {
    margin: 0;
  }

  .ant-menu-item:hover {
    background: $dark-menu-hover;
  }

  .ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
    background: $dark-menu-active;
  }
}

.rightBtnAll {
  display: flex;
  margin-right: 20px;
  cursor: pointer;
}

.userInfo {
  margin-right: 20px;
}

.loginout {
  color: #1890ff;
}

/* 设置滚动条的样式 */
.ant-layout-sider-dark::-webkit-scrollbar {
  width: 8px;
}

/* 滚动槽 */
.ant-layout-sider-dark::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

/* 滚动条滑块 */
.ant-layout-sider-dark::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #b4d4f3a3;
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
</style>
